<template>
  <div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float:left; padding: 3px 0" type="text"
            >快捷链接列表</el-button
          >
          <el-button
            @click="isShow2 = !isShow2"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow2 == true ? "收起" : "展开" }}</el-button
          >
        </div> 
        <div v-show="isShow2 == true">
            <el-button type="primary" @click="OpenAdd" style="float:left;">添加快捷链接</el-button>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column prop="quick_link_number" label="编号" width="180">
            </el-table-column>
            <el-table-column
              prop="quick_link_name"
              label="快捷链接名称"
              width="450px"
            >   
            </el-table-column>
            <el-table-column
              prop="quick_link_address"
              label="快捷链接地址"
              width="450px"
            >        
            </el-table-column>
            <el-table-column prop="quick_link_address" label="删除">
              <template slot-scope="scope">
                <el-button
                  @click="QuickLinkListDelete(scope.row.quick_link_number)"
                  type="text"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <div v-show="isShowEdit == true">
      <el-card class="box-card">
        <div slot="header" class="clearfix;">
          <el-button style="float: left; padding: 3px 0" type="text">快捷链接添加</el-button>
          <el-button
            @click="isShow3 = !isShow3"
            style="float: right; padding: 3px 0"
            type="text"
            >{{ isShow3 == true ? "收起" : "展开" }}</el-button
          >
        </div>
        <el-col :push="8">
          <div v-show="isShow3 == true">
            <el-form
              style="float: left"
              ref="form"
              :model="form"
              label-width="80px"
            >
              <el-form-item label="链接名称">
                <el-input v-model="form.quick_link_name"></el-input>
              </el-form-item>
              <el-form-item label="链接地址">
                <el-input v-model="form.quick_link_address"></el-input>
              </el-form-item>
              <el-button
                type="success" @click="QuickLinkListAdd"
                >保存</el-button
              >
              <el-button @click="isShowEdit = false">取消</el-button>
            </el-form>
          </div>
        </el-col>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
SearchPage,
QuickLinkListAdd,
QuickLinkListDelete
} from "./quick_link_listApi";
export default {
  data() {
    return {
      tableData: [],
      isShow2: true,
      isShow3: true, 
      isShowEdit: false, 
      form: {
        quick_link_name:null,
        quick_link_address:null
      },
    };
  },
  created() {
    this.SearchPage();
  },
  methods: {
    SearchPage() {
      SearchPage().then((res) => {
        this.tableData = res.data;
      });
    },
    OpenAdd() {
      this.isShowEdit = true;
       this.form.quick_link_name=null;
       this.form.quick_link_address=null;
    },
    QuickLinkListAdd() {
      QuickLinkListAdd(this.form).then((res) => {
        if (res.data > 0) {
          alert("添加成功");
          this.isShowEdit = false;
          this.SearchPage();
        } else {
          alert("数据不能为空");
        }
      });
    },
     QuickLinkListDelete(id) {
            if(confirm("是否确认删除?")==false)return;
      QuickLinkListDelete(id).then((res) => {
        if (res.data > 0) {
          alert("删除成功");
          this.SearchPage();
        } 
      });
    },
  },
};
</script>